<template>
  <div class="container">
      <div class="border-b p1">
          <div class="flex">
                <div class="blue-line">

                </div>
                <div class="title">          
                    券信息
                </div>
            </div>      
      </div>
      <div class="info-item border-b">
        <div class="info-label">
            产品名称:
        </div>      
        <div class="info-desc">
            {{info[1]?info[1][1]:''}}
        </div>        
    </div>    
    <div class="info-item border-b">
        <div class="info-label">
            有效期:
        </div>
        <div class="info-desc red-txt">
             {{timestr(info[10]?info[10][1]:'')}} 至 {{timestr(info[11]?info[11][1]:'')}}
        </div>
    </div>
    <div class="info-item border-b">
        <div class="info-label">
            状态:
        </div>
        <div class="info-desc red-txt" v-if="info[4]">
            {{info[4][1]|status}}
        </div>
    </div>
    <div class="info-item border-b">
        <div class="info-label">
            电子券券码:
        </div>
        <div class="info-desc red-txt" v-if="info[0]">
            {{info[0][1]}}
        </div>
    </div>
    <div class="info-item border-b">
        <div class="info-label">
            电子券说明:
        </div>
        <div class="info-desc" v-if="info[12]">
              {{info[12][1]}}
        </div>
    </div>
    <div class="hr24"></div>    
    <div class="border-b p1">
          <div class="flex">
                <div class="blue-line">

                </div>
                <div class="title">          
                    客服电话
                </div>
            </div>      
      </div>
      <div class="p30 bg-white">
          <div class="flex">
              <img src="../../assets/icons/phone-gray.png" alt="" class="phone-gray">
              <div class="kf-phone">
                  4006-123-231
              </div>
          </div>
      </div>
      <div v-if="this.info[4] && this.info[4][1]==0">
          <div class="tip-msg">
          到店出示，由店员完成核销操作
      </div>
      <div class="qrcode-area text-center">
          <img :src="qrcodeData" v-if="qrcodeData" alt="" class="qrcode-img">
      </div>
      </div>
  </div>
</template>
<script>
import QRCode from "qrcode";
export default {
  data() {
    return {
      info: {},
      qrcodeData: ""
    };
  },
  filters: {
    status(s) {
      if (s != "2") {
        return "未使用";
      }
      return "已使用";
    }
  },
  created() {
    this.showLoading();
    let cardId = this.$route.query.cardId;

    QRCode.toDataURL(cardId, (err, url) => {
      this.qrcodeData = url;
    });

    this.$get("/api/getETicketsOfCardId", { cardId })
      .then(data => {
        this.hideLoading();
        this.info = data;
      })
      .catch(_ => {
        this.hideLoading();
      });
  },
  methods: {
    timestr(str) {
      return str.substr(0, 4) + "-" + str.substr(4, 2) + "-" + str.substr(6, 2);
    }
  }
};
</script>

<style lang="scss" scoped>
.blue-line {
  width: 0.0933rem;
  height: 0.5333rem;
  background-color: #22b869;
  margin-right: 0.1867rem;
}
html,
body,
.container {
  background-color: #f5f4f9;
}
.kf-phone {
  font-size: 0.4267rem;
  color: #888;
}
.p1 {
  font-size: 0.3733rem;
  color: #333;
  background-color: #fff;
  padding: 0.3467rem 0.4rem;
}
.hr24 {
  height: 0.32rem;
}
.info-label {
  color: #999;
  display: inline-block;
  width: 2.2rem;
}
.info-desc {
  display: inline;
}
.red-txt {
  color: #cc0001;
}
.phone-gray {
  width: 0.6667rem;
  height: 0.6667rem;
  margin-right: 0.2rem;
}
.tip-msg {
  color: #cc0001;
  padding: 1.0133rem 0;
  font-size: 0.4rem;
  text-align: center;
}
.qrcode-img {
  width: 5.5467rem;
  height: 5.6rem;
}
.qrcode-area {
  padding-bottom: 2rem;
}
.info-item {
  font-size: 0.3733rem;
  background-color: #fff;
  padding: 0.2667rem 0.4rem;
  line-height: 0.6667rem;
}
</style>

